<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elite Alliance - AceHub</title>
        <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="league2.0.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
      <link rel="stylesheet" href="../header-footer/common.css">
</head>
<body>
     <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <li><a href="WebsiteHomepage.html">home page</a></li>
                    <li><a href="courseList.html">course</a></li>
                    <li><a href="league.html" class="active">Alliance colleges</a></li>
                    <li><a href="about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- 用户信息将由JavaScript动态加载 -->
        </div>
    </header>

    <!-- 主体内容 -->
    <main class="elite-league">
        <!-- 动态粒子背景 -->
        <div id="particles-js"></div>
        
        <!-- 炫彩标题区 -->
        <section class="hero-section">
            <div class="hero-content">
                <h1 class="glowing-title">Elite Education Alliance</h1>
                <p class="hero-subtitle">Gathering top universities and sharing intelligent resources</p>
                <div class="scrolling-ribbon">
                    <div class="ribbon-content">
                        <span>Tsinghua University</span>
                        <span>Peking University</span>
                        <span>Shenzhen University</span>
                        <span>Fudan University</span>
                        <span>Shanghai Jiaotong University</span>
                        <span>Zhejiang University</span>
                        <span>Nanjing University</span>
                        <span>Wuhan University</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 数据展示 -->
        <section class="stats-section">
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-university"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number" data-count="68">68</div>
                        <div class="stat-label">Alliance colleges</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number" data-count="1200">1200</div>
                        <div class="stat-label">Premium courses</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number" data-count="500">500</div>
                        <div class="stat-label">Over 10000 students</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number" data-count="98">98</div>
                        <div class="stat-label">Satisfaction level</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 院校展示 -->
        <section class="universities-section">
            <div class="section-header">
                <h2 class="section-title">ours<span>Alliance colleges</span></h2>
                <div class="section-subtitle">Joining hands with top universities to create a better future for education</div>
            </div>

            <div class="university-grid">
                <!-- 清华大学 -->
                <div class="university-card">
                    <div class="university-badge">TOP 1</div>
                    <div class="university-logo">
                        <img src="images/tsinghua.png" alt="清华大学">
                        <div class="logo-halo"></div>
                    </div>
                    <h3 class="university-name">Tsinghua University</h3>
                    <div class="university-meta">
                        <span class="university-rank">QS ranking: 14</span>
                        <span class="university-type">985/211</span>
                    </div>
                    <div class="university-desc">
                        China's top comprehensive research university, renowned worldwide for engineering and computer science.
                    </div>
                    <div class="university-courses">
                        <div class="course-tag">Computer Science</div>
                        <div class="course-tag">artificial intelligence</div>
                        <div class="course-tag">engineering management</div>
                    </div>
                 
                </div>

                <!-- 北京大学 -->
                <div class="university-card">
                    <div class="university-badge">TOP 2</div>
                    <div class="university-logo">
                        <img src="images/pking.png" alt="北京大学">
                        <div class="logo-halo"></div>
                    </div>
                    <h3 class="university-name">Peking University</h3>
                    <div class="university-meta">
                        <span class="university-rank">QS ranking: 12</span>
                        <span class="university-type">985/211</span>
                    </div>
                    <div class="university-desc">
                        China is a leader in the field of humanities and social sciences, and has cultivated a large number of thinkers and scholars.
                    </div>
                    <div class="university-courses">
                        <div class="course-tag">Philosophical History</div>
                        <div class="course-tag">economic management</div>
                        <div class="course-tag">Literature and Art</div>
                    </div>
                 
                </div>

                <!-- 深圳大学 -->
                <div class="university-card">
                    <div class="university-badge">New Talent</div>
                    <div class="university-logo">
                        <img src="images/szu.png" alt="深圳大学">
                        <div class="logo-halo"></div>
                    </div>
                    <h3 class="university-name">Shenzhen University</h3>
                    <div class="university-meta">
                        <span class="university-rank">QS ranking: 601-650</span>
                        <span class="university-type">First-class discipline</span>
                    </div>
                    <div class="university-desc">
                        Innovative universities at the forefront of reform and opening up, known for their expertise in computer science and optoelectronics.
                    </div>
                    <div class="university-courses">
                        <div class="course-tag">computer graphics</div>
                        <div class="course-tag">large model</div>
                        <div class="course-tag">Optoelectronics</div>
                    </div>
                
                </div>
            </div>
        </section>

        <!-- 加入联盟 -->
        <section class="join-section">
            <div class="join-container">
                <div class="join-content">
                    <h2 class="join-title">Join the Elite Education Alliance</h2>
                    <p class="join-desc">
                        We are looking for like-minded educational institutions to jointly build the highest quality online education platform in China.
Join us, share resources, and create the future together!
                    </p>
                   <div class="join-buttons">
                        <a href="../account/login.html" class="btn-join">Apply now</a>
                        <a href="contact.html" class="btn-contact">Contact Us</a>
                    </div>

                </div>
                <div class="join-graphic">
                    <div class="graphic-circle"></div>
                    <div class="graphic-icons">
                        <i class="fas fa-handshake"></i>
                        <i class="fas fa-graduation-cap"></i>
                        <i class="fas fa-laptop-code"></i>
                    </div>
                </div>
            </div>
        </section>
    </main>

     <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="privacy.html">Privacy Policy</a></li>
                        <li><a href="terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 脚本引入 -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="js/league.js"></script>
     <!-- 页眉用户信息加载脚本 -->
    <script>
        window.onload = function () {
const userid = localStorage.getItem('token');
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = 'WebsiteHomepage.html';
                });
            } else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>
</body>
</html>